

<template>
  <template v-for="menu in userMenu">
    <el-sub-menu v-if="menu.Children && menu.Children.length > 0" :key="menu.Id" :index="menu.Path">
      <template #title>
        <el-icon>
          <!-- 动态组件渲染 -->
          <component :is="menu.Icon"></component>
        </el-icon>
        <span>{{menu.MenuName}}</span>
      </template>
      <tree-menu :userMenu="menu.Children"/>
    </el-sub-menu>
    <el-menu-item v-else :index="menu.Path" :key="menu.Id">
      {{menu.MenuName}}
    </el-menu-item>
  </template>
<!--  <el-sub-menu index="1">-->
<!--    <template #title>-->
<!--      <el-icon><user /></el-icon>-->
<!--      <span>用户管理</span>-->
<!--    </template>-->
<!--    <el-menu-item router="true" index="../views/Login">用户列表</el-menu-item>-->
<!--    <el-menu-item index="1-2">用户管理</el-menu-item>-->
<!--  </el-sub-menu>-->
<!--  <el-sub-menu index="2">-->
<!--    <template #title>-->
<!--      <el-icon><ChatLineRound /></el-icon>-->
<!--      <span>群组管理</span>-->
<!--    </template>-->
<!--    <el-menu-item index="2-1">群组列表</el-menu-item>-->
<!--    <el-menu-item index="2-2">群组管理</el-menu-item>-->
<!--  </el-sub-menu>-->

<!--  <el-sub-menu index="3">-->
<!--    <template #title>-->
<!--      <el-icon><Tools /></el-icon>-->
<!--      <span>系统设置</span>-->
<!--    </template>-->
<!--    <el-menu-item index="3-1">背景</el-menu-item>-->
<!--    <el-menu-item index="3-2">关于</el-menu-item>-->
<!--  </el-sub-menu>-->
</template>

<script>
export default {
  name:'TreeMenu',
  props:{
    userMenu:{
      type:Array,
      default(){
        return []
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
<script setup>
</script>